<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件监听</title>
</head>
<body>
<button onclick="alert('警示框')">弹出警示框</button>
<button id="but">我是按钮</button>
<h4>全体目光向我看齐，我宣布个事...</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus dicta dolorem earum, explicabo id
    illum maiores maxime rem voluptates. Soluta, tempore veritatis. Consequuntur impedit, nesciunt nihil optio rerum
    veritatis.
</div>
<div>Ab blanditiis consectetur cum deleniti dicta dignissimos dolorum eius eveniet ex excepturi harum impedit labore
    laudantium libero minima molestias nobis odit perspiciatis quaerat sed similique, sunt tempora unde vero voluptate.
</div>
<div>Aliquam assumenda ducimus expedita harum laboriosam odit, optio porro quia quibusdam quis reprehenderit sint. Alias
    at placeat porro voluptate voluptatibus. Corporis ea est fuga magnam nemo nostrum perferendis placeat sequi?
</div>
<div>Ab ducimus facere inventore, iure quam qui sed! A aperiam at corporis doloribus ducimus ea incidunt laudantium,
    magni non nulla odit quidem quisquam sint voluptatem voluptates? Blanditiis libero quasi voluptates!
</div>
<div>Distinctio ipsa iure nam quis rem sequi unde ut voluptatibus? Assumenda doloremque facilis magni molestiae nulla
    quidem rerum sit vel. Ab aliquid corporis eveniet exercitationem facilis harum nemo odit quisquam?
</div>
<div>Alias dignissimos eaque error minima molestiae molestias, odit totam veniam. Aliquid animi architecto assumenda
    debitis ducimus expedita inventore ipsa libero magni natus necessitatibus nemo nobis optio provident ratione
    repellat, sequi.
</div>
<div>Dolor dolore itaque maxime nemo nisi odio provident quia rerum, saepe sequi! Assumenda deserunt distinctio dolor
    enim harum incidunt obcaecati repellendus sit tempora veritatis. Delectus facilis officia pariatur porro veniam.
</div>
<div>A ad architecto consectetur consequuntur dolorum ducimus expedita facilis fuga hic illo iste, laborum libero modi
    numquam, optio quas repudiandae sed sequi sit suscipit tenetur totam veniam vitae voluptas voluptate?
</div>
<div>A ab alias aspernatur autem consequuntur cum cumque debitis delectus deserunt dolor doloribus dolorum earum eius
    iste iusto labore magni molestias nam nemo nostrum quidem quod reprehenderit rerum, sapiente tempore?
</div>
<div>Aperiam autem debitis delectus deserunt dignissimos dolor doloremque doloribus eius iure, molestias odio
    repudiandae sequi, suscipit, voluptas voluptate. Accusantium animi at culpa eligendi fugiat illum, nostrum
    recusandae sapiente temporibus veritatis.
</div>
<div>Asperiores cum eius eligendi excepturi mollitia odit praesentium quaerat qui recusandae sapiente! Dolorem error
    eveniet excepturi, minus placeat quos unde voluptatum. Alias aspernatur assumenda dignissimos ea facere illum nam
    tempore?
</div>
<div>Dignissimos dolores ex illo, ipsum quas quo quos repellat tenetur. Architecto asperiores doloribus dolorum ipsam
    itaque libero pariatur reiciendis soluta tempora tempore? Ab enim necessitatibus nobis quam tempora veritatis
    voluptate.
</div>
<div>Cupiditate deserunt dolor earum error eum id molestiae mollitia, necessitatibus perferendis praesentium quidem quos
    unde ut, vel, voluptatibus. At, eos eveniet id iste nostrum praesentium. Commodi hic illo quam similique.
</div>
<div>Ab animi aspernatur at autem consectetur consequuntur distinctio doloremque, eum ipsa minus molestiae nemo, odio
    omnis provident quis quisquam quo ullam vero. Autem doloremque id illo inventore quasi, recusandae voluptates.
</div>
<div>Aperiam architecto corporis dolores ea est facilis illo laborum libero, numquam perferendis quisquam similique
    tempora tenetur unde, vel? Atque commodi dolorum eius esse maiores natus non numquam reprehenderit rerum
    voluptatibus!
</div>
<div>Autem cupiditate dignissimos dolorum eaque explicabo, facere fugiat maxime obcaecati placeat quos repellat, saepe
    suscipit tenetur vel voluptate voluptatibus voluptatum. Blanditiis dolor ex explicabo harum, ipsa nesciunt quasi
    reprehenderit sint!
</div>
<div>Ab dolores est eveniet quia! Dolor dolore illo sed tempora voluptas! Dicta dolor doloremque doloribus ea et
    excepturi labore molestias numquam omnis quaerat qui quo, sapiente sit sunt vel? Nulla.
</div>
<div>A ad alias autem, beatae delectus deserunt eveniet facilis, impedit in iste laudantium necessitatibus nostrum
    officia rerum soluta sunt veniam, veritatis voluptas. Ducimus ex nulla numquam, officia sint tempore ullam.
</div>
<div>Accusantium blanditiis cumque dolore dolorum ducimus enim fuga ipsa itaque laboriosam libero molestias neque nihil
    numquam officia, quibusdam quos repudiandae sapiente sed, tenetur voluptatem? Asperiores dolores excepturi
    laboriosam sapiente voluptates.
</div>
<div>Ab asperiores, fugiat. A assumenda cumque esse excepturi facere quidem saepe vitae voluptas! Alias beatae dolor
    doloribus ducimus eos laboriosam, libero minima, quas, quasi quia saepe similique suscipit vitae voluptates?
</div>
<div>Accusantium dolorum earum esse est explicabo fugit illum incidunt iste labore, minus natus nihil nisi officia
    perferendis praesentium provident quia quisquam ratione recusandae, sed sequi tenetur totam unde. Architecto,
    consectetur!
</div>
<div>Accusantium autem consequuntur cupiditate, fugit in iste laudantium libero modi nobis nostrum porro repellendus
    repudiandae sit soluta voluptatibus. A, debitis, eveniet! Accusantium autem cum deleniti dolorem id possimus,
    recusandae rem.
</div>
<div>A accusamus amet aperiam at aut consectetur consequatur consequuntur cumque, delectus et labore, molestias nesciunt
    nobis perferendis perspiciatis placeat provident quas, quidem ratione repellat repellendus rerum ullam vitae
    voluptate voluptatum.
</div>
<div>Accusantium aperiam asperiores at consequuntur, debitis dolor doloribus illo, ipsam iure labore, necessitatibus
    nesciunt optio pariatur quasi qui ullam voluptas! Accusamus aut ex laboriosam modi quia recusandae reiciendis rerum
    sequi!
</div>
<div>Animi corporis dolorem, doloribus eius eos est ex fuga id in ipsa ipsum labore, mollitia natus obcaecati officia
    optio quaerat quam quibusdam quis quod reprehenderit repudiandae similique ullam veritatis voluptatum.
</div>
<div>Ab aperiam aut culpa deleniti eaque eveniet fugiat ipsum maxime, nostrum praesentium? Aliquid doloremque dolores ex
    laudantium maxime nemo perspiciatis recusandae sit soluta, tempore. Dolorum fugit natus perspiciatis reiciendis
    temporibus.
</div>
<div>Ab cum dolorem earum error, incidunt, iure magni modi nisi nulla praesentium quidem quos ratione vel? Aspernatur
    corporis dicta doloremque laborum magni nihil porro quo repellat repellendus voluptatibus! Molestiae, quis?
</div>
<div>Aperiam corporis enim et iste laborum nulla tenetur? Accusantium ad autem beatae consectetur corporis cum deserunt
    dolore doloremque ea eos exercitationem illum neque nobis odio odit, quia veritatis voluptate voluptatibus.
</div>
<div>Ab accusamus aspernatur libero magni odit qui quod rerum sed sunt voluptate? Accusantium aliquid aspernatur commodi
    corporis expedita minus nesciunt placeat quia reiciendis repellat, repudiandae suscipit, ullam voluptate? Nihil,
    quia!
</div>
<div>Adipisci alias animi asperiores beatae consequatur cumque cupiditate dolore ducimus ex fugiat hic id labore,
    maiores maxime nam nesciunt non nostrum odio perferendis quaerat quasi qui quisquam rerum tempore vero.
</div>

<script>
    // 鼠标点击事件
    let buttonE = document.querySelector('#but');
    buttonE.addEventListener('click',function () {
        alert('按钮被点击')
    })
    let h4E = document.querySelector('h4');
    h4E.addEventListener('mouseover',function () {
        console.log('鼠标悬停了')
    })

    // window对象是一个浏览器内置的全局对象，代表当前浏览器窗口
    window.addEventListener('resize',function () {
        alert('窗口大小被重置了！')
    })
    window.addEventListener('scroll',function () {
        alert('窗口滚动了！')
    })

</script>

</body>
</html>